<script setup lang="ts">
import { getCategoryTopAPI } from '@/services/category';
import { getHomeBannerAPI } from '@/services/home';
import type { CategoryTopItem } from '@/types/category';
import type { BannerItem } from '@/types/home';
import { onLoad } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import pageSkeleton from './components/pageSkeleton.vue';

// 获取一级分类列表数据
const categoryList = ref<CategoryTopItem[]>([]);
const getCategoryTopData = async () => {
  const res = await getCategoryTopAPI();
  categoryList.value = res.result;
};
// 高亮的下标
const activeIndex = ref(0);
//获取轮播图数据
const bannerList = ref<BannerItem[]>([]);
const getBannerData = async () => {
  const res = await getHomeBannerAPI(2);
  bannerList.value = res.result;
};

// 是否数据加载完成
const isfinish = ref(false);
// 页面加载
onLoad(async () => {
  await Promise.all([getCategoryTopData(), getBannerData()]);
  isfinish.value = true;
});

// 提取当前二级分类数据
const subCategoryList = computed(() => {
  return categoryList.value[activeIndex.value]?.children || [];
});
</script>

<template>
  <view class="viewport" v-if="isfinish">
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search">女靴</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in categoryList"
          :key="item.id"
          class="item"
          :class="{ active: activeIndex === index }"
          @tap="activeIndex = index"
        >
          <text class="name"> {{ item.name }} </text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view class="secondary" scroll-y>
        <!-- 轮播图 -->
        <online-swiper :list="bannerList"></online-swiper>
        <!-- 内容区域 -->
        <view class="panel" v-for="item in subCategoryList" :key="item.id">
          <view class="title">
            <text class="name">{{ item.name }}</text>
            <navigator
              class="more"
              hover-class="none"
              :url="`/pages/goods/goods`"
              >全部</navigator
            >
          </view>
          <view class="section">
            <navigator
              v-for="goods in item.goods"
              :key="goods.id"
              class="goods"
              hover-class="none"
              :url="`/pages/goods/goods?id=${goods.id}`"
            >
              <image class="image" :src="goods.picture"></image>
              <view class="name ellipsis">{{ goods.name }}</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{ goods.price }}</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <!-- 骨架屏 -->
  <pageSkeleton v-else></pageSkeleton>
</template>

<style lang="scss">
@import './components/styles/category.scss';
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.search {
  padding: 0 30rpx 20rpx;
  background-color: #fff;
  .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64rpx;
    padding-left: 26rpx;
    color: #8b8b8b;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: #f3f4f4;
  }
}
.icon-search {
  &::before {
    margin-right: 10rpx;
  }
}
</style>
